<template>
  <div>
    <!-- 1. 官网复制输入框和按钮  手动编写：style="width: 30%" v-model="search";其中serach在data()中  -->
    <el-input style="width: 30%" v-model="search" placeholder="搜索"></el-input>
    <!-- 2. 按钮改名，监听点击事件 -->
    <el-button type="primary" round @click="refreshList()">查询</el-button> <!-- 表格 按钮 -->

    <el-table :data="tableData" style="width: 100%"> <!-- 表格  -->
      <el-table-column label="标题" width="180">     <!-- 表格 列 -->
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- 下面方法体中的this.showEdit=true可以写在上面点击事件括号中，写成 showEdit=true ，效果一样 -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <!-- 删除只需要传当前对象，甚至是当前对象的_id即可 -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableTotal">
    </el-pagination>
    
    <!-- 编辑对话框 -->
    <el-dialog title="编辑备忘" :visible.sync="showEdit"> <!-- 弹窗组件，:visible.sync控制el-dialog的显示 , dialog关闭的时候，element自动设置该值为false-->
      <el-form :model="editForm">   <!-- 表单提交 -->
        <el-form-item label="标题"> <!-- “活动区域”：表单域 -->
          <el-input v-model="editForm.title" autocomplete="off"></el-input> <!-- autocomplete="off" 清除之前记录的信息，防止暴露隐私 -->
        </el-form-item>
        <el-form-item label="内容">
          <!-- 文本框 -->
          <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="editForm.content"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">   <!-- slot 是插槽 -->
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前所在页数
      tableSize: 4, //每页显示数据量
      tableTotal: 0, //数据总量
      showEdit: false, //是否显示编辑对话框
      editForm: { //编辑框内容       
        title: "", //编辑框内的标题
        content: "", //编辑框内的内容
        id: '' //当前数据的唯一id
      },
      tableData: [],// 编辑显示的数据
      search: "",
    };
  },

  created() {
    this.refreshList();
  },

  methods: {
      // 切换每页n条时触发
      handleSizeChange(val) {
        this.tableSize = val;
        this.refreshList();
        console.log(`每页 ${val} 条`);
      },
      //切换页数触发
      handleCurrentChange(val) {
        this.currentPage = val;
        this.refreshList();
        console.log(`当前页: ${val}`);
      },
  
    async refreshList() {
      // console.log(this.search);
      // 3. 声明请求参数对象，JSON格式， { key:value }
      let param = {
        search: this.search,
        pageInfo: {
          size: this.tableSize,
          current: this.currentPage
        }
      }
      // 4. post 请求服务器
      let res = await this.$http.post(
        "/getTodoList", //第一个参数: url
        param   //第二参数：请求参数
      );
      // 5. 服务器响应后，将响应的表格数据赋值给表格数据 tableData
      this.tableData = res.data.result; // 表单数量
      this.tableTotal = res.data.total; // 数据量总数
    },
    // 打开编辑框
    handleEdit(index, row) {
      let title = row.title;  // 获取当前行数据的title值
      let content = row.content; // 获取当前行数据的content值
      this.editForm.title = title; // 赋值给编辑对话框内标题栏输入框的内容
      this.editForm['content'] = content; // 赋值给编辑对话框内内容栏输入框的内容
      this.editForm.id = row._id;  // 这条数据在数据库中唯一的_id, 先缓存，等请求时一起带入 
      console.log('editForm:', this.editForm);
      this.showEdit = true  // 显示对话框
    },

    //删除数据，删除按钮绑定的点击方法
    async handleDelete(row) {
      let todoId = row._id; // 从当前操作对象中取出 _id
      //请求删除
      let res = await this.$http.post(
        "/deleteTodo", //  去服务端app复制路由
        { todoId: todoId } // 请求参数
      );
      // 提示删除结果
      const msgType = ["error", "success"];
      this.$message({
        showClose: true,
        message: res.data.msg,
        type: msgType[res.data.code], // 根据结果代码切换不同类型的提示
      });
      this.refreshList(); // 请求成功后刷新表格
    },
    
    //编辑框中点击确定，请求服务器修改
    async confirmEdit(){
      // 1. 请求
      let res = await this.$http.post(
          '/updateTodo',
          this.editForm
      );
      // 2. 提示操作结果
      const msgType = ['error', 'success'];
      this.$message({
        showClose: true,
        message: res.data.msg,
        type: msgType[res.data.code], // 根据结果代码切换不同类型的提示
      });
      // 3. 如果成功，关闭对话框，刷新表格
       if (res.data.code ===1) {
         this.showEdit = false;
         this.refreshList();
       }

    }
  }
}
</script>